<%@ page import="com.wwdx.shiro.SessionUser" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <jsp:include page="/public/inc/head.jsp"/>
    <script type="text/javascript">
        /* function ascli(url){
             var param = url.split("?")[1].split("&");
             param.sort();
             console.info(param);
             str = param.join("&")+"&key=wwdxreaderwhat0823";
             console.info(str);
             return url+"&sign="+hex_md5(str).toUpperCase();
         }

         var token = "0D2DF0DBAAB040219147DAB73641E3C3";
         var productId = 10002;
         var sign = "8EFE112DA657087D6C3D7DBAF71B81A4";
         console.info(ascli("https://apiv2.readerday.com/api/v2/wxpay/wxsave?token="+token+"&product_id="+productId));*/
         //console.info(sign);
        /* $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
             $.each(data.items, function(i,item){
                 $("<img/>").attr("src", item.media.m).appendTo("#images");
                 if ( i == 3 ) return false;
             });
         });*/

        var $page;
        var $theme;
        var $cardreading;
        var id;
        $(function () {
             var url = "/system/statistics/income?ran="+Math.random();
             $("#page_toolbar").hide();
             $("#card_toolbar").hide();
             /*$("#toolbar").empty().html("<button type=\"button\" id=\"exportExcel\" class=\"btn btn-default\">Excel</button>");*/
             income("#income",url);
             $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                // 获取前一个激活的标签页的名称
                var preId = $(e.relatedTarget).attr("href");
                $(preId).bootstrapTable('destroy');
                 // 获取已激活的标签页的名称
                id = $(e.target).attr("href");
                if (id === '#income'){
                    url = "/system/statistics/income?ran="+Math.random();
                    $("#page_toolbar").hide();
                    $("#card_toolbar").hide();
                    /*$("#toolbar").empty().html("<button type=\"button\" id=\"exportExcel\" class=\"btn btn-default\">Excel</button>");*/
                    income(id,url);
                }else if (id === '#page'){
                    url = "/system/statistics/page?ran="+Math.random();
                    $("#page_toolbar").show();
                    $("#card_toolbar").hide();
                    $("#toolbar").empty();
                    $('#myform')[0].reset();
                    page(id,url);
                }else if (id === '#giveonechannel'){
                    url = "/system/statistics/giveonechannel?ran="+Math.random();
                    $("#page_toolbar").hide();
                    $("#card_toolbar").hide();
                    $("#toolbar").empty();
                    giveonechannel(id,url);
                }else if (id === '#giveonebook'){
                    url = "/system/statistics/giveonebook?ran="+Math.random();
                    $("#page_toolbar").hide();
                    $("#card_toolbar").hide();
                    $("#toolbar").empty();
                    giveonebook(id,url);
                } else if (id === '#giveoneuser'){
                    url = "/system/statistics/giveoneuser?ran="+Math.random();
                    $("#page_toolbar").hide();
                    $("#card_toolbar").hide();
                    $("#toolbar").empty();
                    giveoneuser(id,url);
                } else if (id === '#cardreading'){
                    url = "/system/statistics/cardreading?ran="+Math.random();
                    $("#page_toolbar").hide();
                    $("#card_toolbar").show();
                    $("#toolbar").empty();
                    $('#myform2')[0].reset();
                    cardreading(id,url);
                }
            });

            //查询
            $('#searchBtn').click(function () {
                tabSwitch();
            });

            //清空
            $('#clearBtn').click(function () {
                $('#myform')[0].reset();
                tabSwitch();
            });

            //查询
            $('#searchBtn2').click(function () {
                tabSwitch();
            });

            //清空
            $('#clearBtn2').click(function () {
                $('#myform2')[0].reset();
                tabSwitch();
            });

            var tabSwitch = function () {
                if (id === '#page'){
                    $page.bootstrapTable('refresh');
                }else if (id === '#theme') {
                    $theme.bootstrapTable('refresh');
                }else if (id === '#cardreading') {
                    $cardreading.bootstrapTable('refresh');
                }
            };

            $('#exportExcel').click(function () {
                $("#myModal2").modal('show');
                $("#showInfo2").html("正在发送……");
                $.get("/system/statistics/income/send",{email:'<%=SessionUser.getEmail()%>'},function (data) {
                    $("#showInfo2").empty().html(data.data);
                    setTimeout(function () { $("#myModal2").modal('hide') },2000);
                    $("#exportExcel").attr("disabled", true);
                });
            });
        });

        /**
         * 收入统计列表
         */
        function income(id,url) {
            $(id).bootstrapTable({
                url: url,                           //请求后台的URL（*）
                cache: false,
                striped: true,                      //是否显示行间隔色
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pagination: true,                   //是否显示分页（*）
                showJumpto:true,
                paginationPreText:'上一页',
                paginationNextText:'下一页',
                height:550,
                toolbar:"#toolbar",
                sortStable : true,
                sortName : 'date',
                sortOrder : 'desc',
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                showExport: true,
                exportTypes:['excel'],              //导出文件类型
                //得到查询的参数
                queryParams : function (params) {
                    return {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名
                        sortOrder: params.order //排位命令（desc，asc）
                    };
                },
                rowStyle: function (value,row, index) {
                    var classesArr = ['active' , 'success', 'info' , 'warning' , 'danger'];
                    var strclass = "";
                    var min = 0,max = 4;
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[Math.floor(Math.random()*(max-min+1)+min)];
                    } else {//奇数行
                        strclass = classesArr[Math.floor(Math.random()*(max-min+1)+min)];
                    }
                    return { classes: strclass };
                },
                columns: [{
                    title : '序号',
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize = $(id).bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页  
                        var pageNumber = $(id).bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                }, {
                    field: 'date',
                    title: '日期'
                }, {
                    field: 'order_day_total',
                    title: '当天总收入',
                    sortable:true
                }, {
                    field: 'order_day_user_count',
                    title: '当天订购人数',
                    sortable:true
                }, {
                    field: 'order_day_count',
                    title: '当天订购笔数',
                    sortable:true
                }],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    alert("数据加载失败！");
                },
                onDblClickRow: function (row, $element) {
                }
            });
        }
        
        /**
         * 页面点击量
         */
        function page(id,url) {
            $page = $(id).bootstrapTable({
                url: url,                           //请求后台的URL（*）
                striped: true,                      //是否显示行间隔色
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pagination: true,                   //是否显示分页（*）
                showJumpto:true,
                paginationPreText:'上一页',
                paginationNextText:'下一页',
                cache: false,
                height:570,
                toolbar:"#page_toolbar",
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                sortStable : true,
                sortName : 'date',
                sortOrder : 'desc',
                //得到查询的参数
                queryParams : function (params) {
                    /*var temp = $(id).serializeJsonObject();
                    temp["rows"] = params.limit;                         //页面大小
                    temp["page"] = (params.offset / params.limit) + 1;   //页码
                    temp["sort"] = params.sort;                          //排序列名  
                    temp["sortOrder"] = params.order;                    //排位命令（desc，asc） 
                    return temp;*/
                    return {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,                          //排序列名
                        sortOrder: params.order,                    //排位命令（desc，asc）
                        date:$("#date").val(),
                        date_end:$("#date_end").val(),
                        channel:$("#channel").val(),
                        name:$("#name").val()
                    };
                },
                rowStyle: function (value,row, index) {
                    var classesArr = ['active' , 'success', 'info' , 'warning' , 'danger'];
                    var strclass = "";
                    var min = 0,max = 4;
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[Math.floor(Math.random()*(max-min+1)+min)];
                    } else {//奇数行
                        strclass = classesArr[Math.floor(Math.random()*(max-min+1)+min)];
                    }
                    return { classes: strclass };
                },
                columns: [{
                    title : '序号',
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize = $page.bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页  
                        var pageNumber = $page.bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                }, {
                    field: 'date',
                    title: '日期'
                }, {
                    field: 'channel',
                    title: '渠道',
                    formatter:function (value) {
                        var channel;
                        if (value === 'ios'){
                            channel = '苹果';
                        }else if (value === 'android'){
                            channel = '安卓';
                        }else if (value === 'weixin'){
                            channel = '微信';
                        }else if (value === 'wxma'){
                            channel = '小程序';
                        }
                        return channel;
                    }
                }, {
                    field: 'name',
                    title: '页面'
                }, {
                    field: 'pv',
                    title: 'pv',
                    sortable:true
                }, {
                    field: 'uv',
                    title: 'uv',
                    sortable:true
                }],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    alert("数据加载失败！");
                },
                onDblClickRow: function (row, $element) {
                }
            });
        }

        /**
         * 赠一得一按渠道统计
         * @param id
         * @param url
         */
        function giveonechannel(id,url) {
            $(id).bootstrapTable({
                url: url,                           //请求后台的URL（*）
                striped: true,                      //是否显示行间隔色
                pagination: true,                   //是否显示分页（*）
                showJumpto:true,
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                paginationPreText:'上一页',
                paginationNextText:'下一页',
                cache: false,
                height:500,
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                sortStable : true,
                sortName : 'date',
                sortOrder : 'desc',
                //得到查询的参数
                queryParams : function (params) {
                    return {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名
                        sortOrder: params.order //排位命令（desc，asc）
                    };
                },
                rowStyle: function (value,row, index) {
                    var classesArr = ['active' , 'success', 'info' , 'warning' , 'danger'];
                    var strclass = "";
                    var min = 0,max = 4;
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[Math.floor(Math.random()*(max-min+1)+min)];
                    } else {//奇数行
                        strclass = classesArr[Math.floor(Math.random()*(max-min+1)+min)];
                    }
                    return { classes: strclass };
                },
                columns: [{
                    title : '序号',
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize = $(id).bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页
                        var pageNumber = $(id).bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                }, {
                    field: 'date',
                    title: '日期'
                }, {
                    field: 'channel',
                    title: '渠道'
                }, {
                    field: 'pvCount',
                    title: 'PV',
                    sortable:true
                }, {
                    field: 'uvCount',
                    title: 'UV',
                    sortable:true
                }, {
                    field: 'giveUserCount',
                    title: '领取人数',
                    sortable:true
                }, {
                    field: 'giveBookCount',
                    title: '领取书籍数',
                    sortable:true
                }],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    alert("数据加载失败！");
                },
                onDblClickRow: function (row, $element) {
                }
            });
        }

        /**
         * 赠一得一按书籍统计
         * @param id
         * @param url
         */
        function giveonebook(id,url) {
            $(id).bootstrapTable({
                url: url,                           //请求后台的URL（*）
                striped: true,                      //是否显示行间隔色
                pagination: true,                   //是否显示分页（*）
                showJumpto:true,
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                paginationPreText:'上一页',
                paginationNextText:'下一页',
                cache: false,
                height:500,
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                sortStable : true,
                sortName : 'date',
                sortOrder : 'desc',
                //得到查询的参数
                queryParams : function (params) {
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    return {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名
                        sortOrder: params.order //排位命令（desc，asc）
                    };
                },
                rowStyle: function (value,row, index) {
                    var classesArr = ['active' , 'success', 'info' , 'warning' , 'danger'];
                    var strclass = "";
                    var min = 0,max = 4;
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[Math.floor(Math.random()*(max-min+1)+min)];
                    } else {//奇数行
                        strclass = classesArr[Math.floor(Math.random()*(max-min+1)+min)];
                    }
                    return { classes: strclass };
                },
                columns: [{
                    title : '序号',
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize = $(id).bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页
                        var pageNumber = $(id).bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                }, {
                    field: 'date',
                    title: '日期'
                }, {
                    field: 'bookname',
                    title: '书籍名称'
                }, {
                    field: 'pvCount',
                    title: 'PV',
                    sortable:true
                }, {
                    field: 'uvCount',
                    title: 'UV',
                    sortable:true
                }, {
                    field: 'giveUserCount',
                    title: '领取人数',
                    sortable:true
                }],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    alert("数据加载失败！");
                },
                onDblClickRow: function (row, $element) {
                }
            });
        }

        /**
         * 赠一得一按用户统计
         * @param id
         * @param url
         */
        function giveoneuser(id,url) {
            $(id).bootstrapTable({
                url: url,                           //请求后台的URL（*）
                striped: true,                      //是否显示行间隔色
                pagination: true,                   //是否显示分页（*）
                showJumpto: true,
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                paginationPreText: '上一页',
                paginationNextText: '下一页',
                cache: false,
                height: 500,
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                sortStable: true,
                sortName: 'date',
                sortOrder: 'desc',
                //得到查询的参数
                queryParams: function (params) {
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    return {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名
                        sortOrder: params.order //排位命令（desc，asc）
                    };
                },
                rowStyle: function (value, row, index) {
                    var classesArr = ['active', 'success', 'info', 'warning', 'danger'];
                    var strclass = "";
                    var min = 0, max = 4;
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[Math.floor(Math.random() * (max - min + 1) + min)];
                    } else {//奇数行
                        strclass = classesArr[Math.floor(Math.random() * (max - min + 1) + min)];
                    }
                    return {classes: strclass};
                },
                columns: [{
                    title: '序号',
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize = $(id).bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页
                        var pageNumber = $(id).bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                }, {
                    field: 'date',
                    title: '日期'
                }, {
                    field: 'nickname',
                    title: '用户'
                }, {
                    field: 'pvCount',
                    title: 'PV',
                    sortable: true
                }],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    alert("数据加载失败！");
                },
                onDblClickRow: function (row, $element) {
                }
            });
        }

        /**
         * 早读听书打卡统计
         * @param id
         * @param url
         */
        function cardreading(id, url) {
            $cardreading = $(id).bootstrapTable({
                url: url,                           //请求后台的URL（*）
                striped: true,                      //是否显示行间隔色
                pagination: true,                   //是否显示分页（*）
                showJumpto: true,
                toolbar: "#card_toolbar",
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                paginationPreText: '上一页',
                paginationNextText: '下一页',
                cache: false,
                height: 570,
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                showExport: true,
                exportTypes:['excel'],              //导出文件类型
                sortStable: true,
                sortName: 'date',
                sortOrder: 'desc',
                //得到查询的参数
                queryParams: function (params) {
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    return {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名
                        sortOrder: params.order, //排位命令（desc，asc）
                        date:$("#date2").val(),
                        dateEnd:$("#date_end2").val(),
                        type:$("#type").val()
                    };
                },
                rowStyle: function (value, row, index) {
                    var classesArr = ['active', 'success', 'info', 'warning', 'danger'];
                    var strclass = "";
                    var min = 0, max = 4;
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[Math.floor(Math.random() * (max - min + 1) + min)];
                    } else {//奇数行
                        strclass = classesArr[Math.floor(Math.random() * (max - min + 1) + min)];
                    }
                    return {classes: strclass};
                },
                columns: [{
                    title: '序号',
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {
                        //获取每页显示的数量
                        var pageSize = $(id).bootstrapTable('getOptions').pageSize;
                        //获取当前是第几页
                        var pageNumber = $(id).bootstrapTable('getOptions').pageNumber;
                        //返回序号，注意index是从0开始的，所以要加上1
                        return pageSize * (pageNumber - 1) + index + 1;
                    }
                }, {
                    field: 'date',
                    title: '日期',
                    sortable: true
                }, {
                    field: 'type',
                    title: '类型',
                    formatter:function (value) {
                        if (value === 0){
                            return "打卡";
                        }else {
                            return "订阅";
                        }
                    }
                }, {
                    field: 'userDayCount',
                    title: '活跃用户数',
                    sortable: true
                }, {
                    field: 'userNewCount',
                    title: '新增用户数',
                    sortable: true
                }, {
                    field: 'userTotalCount',
                    title: '用户总数',
                    sortable: true
                }],
                onLoadSuccess: function () {
                },
                onLoadError: function () {
                    alert("数据加载失败！");
                },
                onDblClickRow: function (row, $element) {
                }
            });

            //导出自定义数据
            /*$("#card_toolbar").find('select').change(function () {
                $cardreading.bootstrapTable('destroy').bootstrapTable({
                    exportDataType: $(this).val()
                });
            });*/
        }

        /**
         * 操作
         * @param value
         * @param row
         * @param index
         * @returns {string}
         */
        function operateFormatter(value, row, index) {
             return [
                   '<a class="btn active disabled" href="#">编辑</a>',
                   '<a class="btn active" href="#">删除</a>',
                   '<a class="btn btn-default" href="#">记录</a>',
                   '<a class="btn active" href="#">准入</a>'
            ].join('');
        }
    </script>
</head>
<body>
<div id="header" class="navbar navbar-static-top" role="navigation">
    <jsp:include page="/public/inc/top.jsp"/>
</div>
<div class="container-fluid" style="margin-top:5px;margin-bottom:60px;">
    <div class="row">
        <jsp:include page="/public/inc/menu.jsp"/>
        <div class="col-xs-12 col-sm-10">
            <div id="toolbar"></div>
            <div id="page_toolbar">
                <form id="myform">
                    <label>
                        <select id="channel" name="channel" class="form-control">
                            <option value="">渠道</option>
                            <option value="ios">苹果</option>
                            <option value="android">安卓</option>
                            <option value="weixin">微信</option>
                            <option value="wxma">小程序</option>
                        </select>
                    </label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <label>
                        <input class="form-control" id="name" name="name" placeholder="页面名称"/>
                    </label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <label>
                        <input class="form-control date-picker" readonly id="date" name="date" size="10" placeholder="开始时间"/>
                    </label>
                    ~
                    <label>
                        <input class="form-control date-picker" readonly id="date_end" name="date_end" size="10" placeholder="结束时间"/>
                    </label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" id="searchBtn" class="btn btn-default">筛选</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="reset" id="clearBtn" class="btn btn-default">清空</button>
                </form>
            </div>
            <div id="card_toolbar">
                <%--<label>
                    <select class="form-control">
                        <option value="">Export Basic</option>
                        <option value="all">Export All</option>
                        <option value="selected">Export Selected</option>
                    </select>
                </label>--%>
                <form id="myform2">
                    <label>
                        <select id="type" name="type" class="form-control">
                            <option value="">请选择</option>
                            <option value="0">打卡</option>
                            <option value="1">订阅</option>
                        </select>
                    </label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <label>
                        <input class="form-control date-picker" readonly id="date2" name="date" size="10" placeholder="开始时间"/>
                    </label>
                    ~
                    <label>
                        <input class="form-control date-picker" readonly id="date_end2" name="dateEnd" size="10" placeholder="结束时间"/>
                    </label>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="button" id="searchBtn2" class="btn btn-default">筛选</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="reset" id="clearBtn2" class="btn btn-default">清空</button>
                </form>
            </div>
            <ul class="nav nav-tabs">
                <li class="active"><a href="#income" data-toggle="tab">收入统计</a></li>
                <li><a href="#page" data-toggle="tab">页面统计</a></li>
                <li class="dropdown">
                    <a href="#" id="myTabDrop2" class="dropdown-toggle" data-toggle="dropdown">
                        赠一得一<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
                        <li><a href="#giveonechannel" data-toggle="tab">按渠道统计</a></li>
                        <li><a href="#giveonebook" data-toggle="tab">按书籍统计</a></li>
                        <li><a href="#giveoneuser" data-toggle="tab">按用户统计</a></li>
                    </ul>
                </li>
                <li><a href="#cardreading" data-toggle="tab">早读打卡订阅统计</a></li>
            </ul>
            <div class="tab-content">
                <table class="tab-pane fade in active" id="income"></table>
                <table class="tab-pane fade" id="page"></table>
                <table class="tab-pane fade" id="giveonechannel"></table>
                <table class="tab-pane fade" id="giveonebook"></table>
                <table class="tab-pane fade" id="giveoneuser"></table>
                <table class="tab-pane fade" id="cardreading"></table>
            </div>
            <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="myModalLabel2">通知</h4>
                        </div>
                        <div id="showInfo2" class="modal-body"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>